
<nav class="mx-auto flex max-w-3xl items-center justify-between p-4">
  <a
    class="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-gray-100 cursor-pointer"
    href="/"
  >
    👋
  </a>

  <ul class="flex items-center gap-2 text-sm font-medium text-gray-500">
    <li class="hidden lg:block">
      <a class="rounded-lg px-3 py-2 cursor-pointer" href="/"> Home </a>
    </li>

    <li><a class="rounded-lg px-3 py-2 cursor-pointer" href=""> Projects </a></li>

    <li>
      <a
        class="inline-flex items-center rounded-lg px-3 py-2 cursor-pointer"
        href=""
        target="_blank"
      >
        External
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
          class="ml-1.5 h-4 w-4"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
          ></path>
        </svg>
      </a>
    </li>
  </ul>
</nav>
